<template>
	<div>
		<el-row :gutter="20">
			<el-col :span="15">
				<div class="card-header">
					<div class="info">
						<span>数据准备</span>
					</div>
				</div>
				<el-col>
					<el-card shadow="hover" class="mgb20">
						<br />
						<el-row :gutter="20">
							<el-col :span="12">
								<a href="#/data/split">
									<el-card class="data_card" shadow="hover" :body-style="{ padding: '0px' }">
										<div class="grid-content grid-con-1">
											<el-icon class="grid-con-icon">
												<img :src="icon_split" alt="Norway" height="70%" width="60%" >
											</el-icon>
											<div class="grid-cont-right">
												<div class="grid-num">下机数据拆分</div>
												<div class="grid-subnum">用于二代测序数据的bcf文件拆分</div>
											</div>
										</div>
									</el-card>
								</a>
							</el-col>
							<el-col :span="12">
								<el-card class="data_card" shadow="hover" :body-style="{ padding: '0px' }">
									<div class="grid-content grid-con-1">
										<el-icon class="grid-con-icon">
											<img :src="icon_merge" alt="Norway" height="70%" width="60%">
										</el-icon>
										<div class="grid-cont-right">
											<div class="grid-num">数据合并</div>
											<div class="grid-subnum">用于二代数据的批次间数据合并</div>
										</div>
									</div>
								</el-card>
							</el-col>
						</el-row>
					</el-card>
				</el-col>
				<div class="card-header">
					<div class="info">
						<span>开始检测</span>
					</div>
				</div>
				<el-col>
					<el-card shadow="hover" class="mgb20" style="height: 420px">
						<el-steps align-center simple :space="200" :active="active">
							<el-step title="检测项目" :icon="Document" />
							<el-step title="基本信息" :icon="Edit" />
							<el-step title="选择样品" :icon="UploadFilled" />
							<el-step title="参数&提交" :icon="Picture" />
						</el-steps>
						<br />
						<el-row :gutter="20">
							<el-col :span="12">
								<a href="#/mNGS/setting">
									<el-card class="data_card" shadow="hover" :body-style="{ padding: '0px' }">
										<div class="grid-content grid-con-3">
											<el-icon class="grid-con-icon">
												<img :src="icon_list" alt="Norway" height="70%" width="60%">
											</el-icon>
											<div class="grid-cont-right">
												<div class="grid-num">外源因子mNGS检测</div>
												<div class="grid-subnum">外源因子宏基因组的检测</div>
											</div>
										</div>
									</el-card>
								</a>
							</el-col>
							<el-col :span="12">
								<a href="#/tNGS/setting">
									<el-card class="data_card" shadow="hover" :body-style="{ padding: '0px' }">
										<div class="grid-content grid-con-3">
											<el-icon class="grid-con-icon">
												<img :src="icon_list" alt="Norway" height="70%" width="60%">
											</el-icon>
											<div class="grid-cont-right">
												<div class="grid-num">外源因子tNGS检测</div>
												<div class="grid-subnum">外源因子靶向基因组检测</div>
											</div>
										</div>
									</el-card>
								</a>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="12">
								<a href="#/">
									<el-card class="data_card" shadow="hover" :body-style="{ padding: '0px' }">
										<div class="grid-content grid-con-3">
											<el-icon class="grid-con-icon">
												<img :src="icon_list" alt="Norway" height="70%" width="60%">
											</el-icon>
											<div class="grid-cont-right">
												<div class="grid-num">遗传稳定性检测</div>
												<div class="grid-subnum">检测遗传基因的稳定性</div>
											</div>
										</div>
									</el-card>
								</a>
							</el-col>
						</el-row>
					</el-card>
				</el-col>
			</el-col>
			<el-col :span="9">
				<div class="card-header">
					<div class="info">
						<span>&nbsp;</span>
					</div>
				</div>
				<el-card class="description" shadow="hover">
					<div class="block text-center" m="t-4">
						<el-carousel height="auto" interval="5000" :autoplay="true" indicator-position="outside">
							<el-carousel-item v-for="item in carousel_data" :key="item.id">
								<div class="platintro">
									<div class="card-header">
										<div class="info">
											<span>{{ item.title }}简介</span>
										</div>
									</div>
									<hr class="sbline" color="orange" size="1px"/>
									<div class="image">
										<a :href="item.path">
											<!-- <img :src="item.img_src" alt="Norway" height="20%" width="100%" > -->
										</a>
									</div>
									<p class="retrack">
										{{ item.content.header }}
									</p>
									<ul>
										<li v-for="con,idx in item.content.points" :key="idx">{{ con }}</li>
									</ul>
								</div>
							</el-carousel-item>
						</el-carousel>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts" name="dashboard">
// import Schart from 'vue-schart';
import { UserFilled,Document,Edit,UploadFilled,Picture } from '@element-plus/icons-vue'
import { reactive,ref } from 'vue';
import detect_1 from '@/assets/img/detect_1.png';
import icon_split from '@/assets/img/icon-split.png';
import icon_merge from '@/assets/img/icon-merge.png';
import icon_list from '@/assets/img/icon-list.png';
let carousel_data = reactive([
	{	
		"id":0,
		"title":"平台",
		"path":"#/",
		"content":{
			"header":"作为专业生物制品 NGS 数据分析平台，支持丰富的检测内容，提供专业数据库，实现了对用户零生信要求的突破。平台提供友好的界面，具有自动化数据准备、启动检测、重新检测和出报告四个核心功能，联合任务调度、流程监控、资源管理和数据库记录的四个底层基础，直接消除了实验流程与生信流程对接的障碍，减少人为错误，实现了符合监管要求的准确度。提供：",
			"points":[
				"- 多种检测：外源因子mNGS检测，外源因子tNGS检测，遗传稳定性检测等。",
				"- 专业数据库：符合生物制品检测需求的数据库，经过验证，可信度高。",
				"- 污染的外源因子未知，无偏检测",
				"- 产品研发全过程外源病毒控制",
				"- 高可信度外源病毒",
				"- 高风险外源病毒"
			]
		},
		"img_src":detect_1
	},
	{	
		"id":1,
		"title":"外源因子检测",
		"path":"#/mNGS/description",
		"content":{
			"header":"基于宏基因组二代测序（Metagenomic Next Generation Sequencing mNGS）进行外源因子检测，可以在各种样本类型中敏感、无偏地检测已知和未知病毒。可以检测从原材料和细胞系到最终生物制品所有环节的样本。此检测提供：",
			"points":[
				"- 替代体内法，减少动物使用",
				"- 替代体外法，不需要合适的血清",
				"- 污染的外源因子未知，无偏检测",
				"- 产品研发全过程外源病毒控制",
				"- 高可信度外源病毒",
				"- 高风险外源病毒"
			]
		},
		"img_src":detect_1
	},
	{
		"id":2,
		"title":"靶向基因组检测",
		"path":"#/tNGS/description",
		"content":{
			"header":"基于靶向二代测序（Targeted Next Generation Sequencing  tNGS）进行外源因子检测，可以在各种样本类型中敏感检测已知的高风险病毒。可以检测从原材料和细胞系到最终生物制品所有环节的样本。与 mNGS 相比，只针对关注的病毒，因此灵敏度更高，更加经济高效，此检测提供：",
			"points":[
				"- 替代体内法，减少动物使用",
				"- 替代体外法，不需要血清",
				"- 产品研发全过程高风险外源病毒控制",
				"- 高可信度外源病毒",
			]
		},
		"img_src":detect_1
	},
	{
		"id":3,
		"title":"遗传稳定性",
		"path":"#/mNGS/description",
		"content":{
			"header":"基于二代测序（Next Generation Sequencing  NGS）进行遗传稳定性检测，NGS彻底改变了传统的稳定性测试方法，平台仅提供TLA重组细胞系的表征，提供：",
			"points":[
				"- 拷贝数分析",
				"- 整合位点",
				"- 整合位点前后宿主和TLA序列"
			]
		},
		"img_src":detect_1
	},
])

const baseUser = reactive({
	id: "",
	username: "",
	email: "",
	group: "",
	detail: ""
})
baseUser.username = localStorage.getItem('ms_username');
baseUser.detail = localStorage.getItem('detail');
baseUser.group = localStorage.getItem('group');
const now = new Date()
const formatteTime = ref("")
formatteTime.value =  now.getFullYear() + ('-' + (now.getMonth() + 1)).slice(-2) + ('-' + now.getDate())
const active = ref(1)
const next = () => {
    if (active.value++ > 2) active.value = 1
}
</script>

<style scoped>
/* @import '@/assets/css/dashboard.css'; */

.grid-content {
	display: flex;
	align-items: center;
	background:rgb(247, 247, 247);
	height: 100px;
}
.grid-cont-right {
	flex: 1;
	text-align: center;
	margin-right: 40px;
	margin-bottom: 10px;
	font-size: 14px;
}

.grid-con-icon {
	font-size: 50px;
	width: 120px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	color: #fff;
}

.grid-con-1 .grid-con-icon {
	/* background: rgb(4, 140, 240); */
}

.grid-con-1 .grid-num {
	color: black;
}

.grid-num {
	font-size: 15px;
	font-weight: bold;
}

.el-card {
	border-radius: 12px;
	margin-bottom: 30px;
}

.el-carousel__item {
	height: 630px;
}

.el-carousel__item:nth-child(2n) {
	background-color: #ffffff;
}

.el-carousel__item:nth-child(2n + 1) {
	background-color: #ffffff;
} 

.data_card {
	height: 90px;
}

.card-header {
	display:flex;
	color:orange;
	/* color:#005dad; */
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left:20px;
	/* font-weight:bold; */
}

.info {
	font-size: 30px;
	/* font-weight:bold; */
}

.grid-content {
	display: flex;
	align-items: center;  
	margin-bottom: 40px;
	/* font-weight:bold; */
	/* height:100px; */
}

.grid-cont-right {
	flex: 1;
	text-align: center;
	font-size: 17px;
	color: black;
}

.grid-num {
	font-size: 24px;
	/* font-weight: bold; */
}

.grid-subnum {
	font-size: 15px;
	color: black;
	margin-top: 5px;
	margin-bottom: auto;
	/* font-weight: bold; */
}

.sbline {
	margin-bottom: 10px;
}

.platintro {
	/* background-color: rgba(64, 78, 121, 1); */
	padding: 5px;
	margin-left: 20px;
	margin-right: 10px;
	/* margin-top: 50px; */
}
.platintro h1 {
	text-align: justify;
	font-size: 4.6em;
	/* border-bottom: 1px solid DarkGray; */
}

.subtitle {
	color:#005dad;
	font-size: 20px;
	margin-bottom: 10px;
}
.retrack {
	margin-top: 50px;
	font-size: 18px;
	text-indent: 1.4em;
	margin-bottom: 40px;
	color: black
}

ul li {
	display: flex;
	margin-left: 0px;
	margin-bottom: 2px;
	font-size: 18px;
	color:black
}

.el-steps {
    margin: 20px auto
}

</style>
